<template>
    <div class="container">
      <van-nav-bar title="我关注的电台"
            left-text="返回"
            left-arrow
            @click-left="backEvt"/>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-tabs>
              <van-card
                v-for="it in concern"
                :key="it"
                :desc="it.desc"
                :title="it.title"
                :thumb="it.thumb"
                />
                    
            </van-tabs>
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多数据"
                @load="onLoad">
                <van-cell v-for="item in list" :key="item" :title="item" />
            </van-list>
           
            
            </van-pull-refresh>
            
    </div>
    
</template>

<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';

  let concern:any=ref([])
  

    const router =useRouter()
    const list:any = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);

    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 500);
    };

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };
    
    function backEvt() {
    
    router.push('/mine')
}

onMounted(() => {
  concern.value = [
    {
      desc: "煌甫云杰",
      title: "旅行的意义到底是什么",
      thumb:
        "https://ts4.cn.mm.bing.net/th?id=OIP-C.H9c2zNaWK8Rl82XnrcW07QHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
    },
    
  ]
});
</script>

<style lang="less" scoped>
.van-list{
    height: 250px;
    
}
.van-card{
  margin-top: -50px;
}
.van-card__title{
    font-size: 18px;
}
.van-card__desc{
        font-size: 14px;
}
.van-card__content{
    padding: 16px;
}
.van-tabs__nav--line{
  visibility: hidden;
  
}
</style>